import React from 'react'
import { GQL } from '../../../components/GQL'
import { Form, Select, Input, Modal, message, Tooltip } from 'antd'
import { connect } from 'dva'
import PropTypes from 'prop-types'
import gql from 'graphql-tag'
const { Option } = Select
const DepartMentMoadl = ({ form: { getFieldDecorator, validateFields, resetFields }, dispatch, departs = {}, visible, refetch, editDepartment, loading, departments }) => {
  const isEditText = departs.id ? '编辑' : '新增'
  const onOk = () => {
    validateFields((err, data) => {
      if (!err) {
        data.id = parseInt(data.id)
        data.pid = parseInt(data.pid)
        departs.pid && (data.pid = departs.pid)
        editDepartment({
          variables: { department: data }
        }).then(({ data: { editDepartment } }) => {
          const { status } = editDepartment
          if (status === 'fail') {
            message.error(editDepartment.message)
            return
          }
          message.success(editDepartment.message)
          resetFields()
          refetch()
          dispatch({ type: 'departmentManager/save', payload: { visible: false } })
        }).catch((err) => {
          console.log(err)
          message.error('error')
        })
      }
    })
  }
  return (
    <Modal title={`${isEditText}部门`} visible={visible} okText='确定' cancelText='取消'
      onOk={() => onOk()}
      confirmLoading={loading}
      onCancel={() => {
        resetFields()
        dispatch({ type: 'departmentManager/save', payload: { visible: false } })
      }}>
      <Form layout='vertical'>
        <Form.Item
          label='上级部门'
          hasFeedback
          // validateStatus='success'
        >
          {
            getFieldDecorator('pid', { initialValue: departs.pid ? departs.pid : 0 })(
              <Select>
                <Option value={0}>上级部门</Option>
                {
                  departments.map(item => <Option key={item.id} value={item.id}>{item.name}</Option>)
                }
              </Select>
            )
          }
        </Form.Item>
        <Form.Item
          required
          label='部门名称'
          validateStatus='error'
        >
          <Tooltip placement='bottomLeft' title='请输入部门名称'>
            {
              getFieldDecorator('name', { initialValue: departs.name ? departs.name : '' })(
                <Input />
              )
            }
          </Tooltip>
        </Form.Item>
        <Form.Item
          required
          label='部门编号'
          validateStatus='error'
        >
          <Tooltip placement='bottomLeft' title='请输入部门编号'>
            {
              getFieldDecorator('id', { initialValue: departs.id ? departs.id : '' })(
                <Input />
              )
            }
          </Tooltip>
        </Form.Item>
      </Form>
    </Modal>
  )
}

DepartMentMoadl.propTypes = {
  form: PropTypes.object,
  dispatch: PropTypes.func,
  visible: PropTypes.bool,
  refetch: PropTypes.func,
  resetFields: PropTypes.func,
  editDepartment: PropTypes.func.isRequired,
  loading: PropTypes.bool.isRequired,
  departs: PropTypes.object,
  departments: PropTypes.array
}

const mapStateToProps = ({ departmentManager }) => ({ departmentManager })

export default GQL({
  mutation: gql`
    mutation editDepartment($department: DepartmentInput!){
      editDepartment(department:$department){
        status
        message
      }
    }
  `,
  name: 'editDepartment'
})(connect(mapStateToProps)(Form.create()(DepartMentMoadl)))
